<template>
  <div id="smallnav">
    <div class="main">
      <div class="df">
        <div class="logo">
          <img
            :src="
              get(
                store.getters,
                'indexInfo.logo',
                '../../assets/images/logo.png',
              )
            "
            alt=""
            style="height: 40px; margin-right: 20px"
          />
        </div>

        <div class="f14 df" style="color: 666; margin-right: 8px">
          <el-icon size="14"><LocationFilled /></el-icon>
          {{ store.getters.user.userInfo.province }}
        </div>
        <div class="navList">
          <div
            class="item f14"
            @mouseover="handleMouseOver(item, index)"
            @mouseout="handleMouseOut(item, index)"
            @click="handleCutUrl(item, index)"
            style="position: relative"
            v-for="(item, index) in navList"
            :key="item.id"
          >
            <div style="display: flex; align-items: center">
              {{ item.title
              }}<el-icon
                v-if="item.children"
                class="icon"
                style="margin-left: 5px"
                ><ArrowDown
              /></el-icon>
            </div>
            <div
              :class="[
                `children-box${index}`,
                isActiveBox === index ? 'actveBox' : '',
              ]"
              class="children-box"
            >
              <div
                @click.stop="handleGoUrl(chiln)"
                class="children-item"
                v-for="chiln in item.children"
                :key="chiln.id"
              >
                {{ chiln.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="my-box f14 df curpoin" @click="handleGotoUserCen">
        <img
          src="../../assets/images/vip.png"
          alt=""
          style="width: 25px"
          v-if="store.getters.user.userInfo.realVIP != 0"
        />
        <div class="font-weight600">
          <div class="curr" @click="handleGoUserCent">
            <el-popover trigger="hover" width="300" popper-class="popoverStyle">
              <template #reference>
                <span style="margin-right: 16px">{{
                  store.getters.user.userInfo.nick
                }}</span>
              </template>
              <div class="popver-contaier">
                <div class="header">
                  <div class="left">
                    <img
                      v-if="store.getters.user.userInfo.head"
                      :src="
                        'https://mcdn.chatgk.com' +
                        store.getters.user.userInfo.head
                      "
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/images/default-avatar.png"
                      alt=""
                    />
                  </div>
                  <div class="mid">
                    <div class="name font-weight700" style="text-align: left">
                      {{ store.getters.user.userInfo.nick }}
                    </div>
                    <div class="year f12 text-color">
                      高考年份{{ store.getters.user.userInfo.graduate_time }}年
                    </div>
                  </div>
                  <div style="color: var(--active-text)" class="f12">编辑</div>
                </div>
                <div
                  class="isVip df"
                  v-if="store.getters.user.userInfo.realVIP != 0"
                >
                  <img
                    style="width: 20px; margin: 0 5px"
                    src="../../assets/images/vip.png"
                    alt=""
                  />
                  <div>
                    {{ store.getters.user.userInfo.cardTypeName }}
                    <span style="margin: 0 5px">|</span> 有效期至{{
                      store.getters.user.userInfo.expiretime
                    }}
                  </div>
                </div>

                <div
                  class="isVip df"
                  style="justify-content: space-around"
                  v-else
                >
                  <div>
                    <span @click="onClickOpenVIP">升级VIP</span>
                    <span style="margin: 0 5px">|</span>
                    <span @click="hanleBindingVIP">绑定VIP</span>
                  </div>
                </div>
                <!-- tab -->
                <div class="tab-box fexlDf mt10 curr">
                  <div class="tab-left" @click="handleUserInfo">基本信息</div>
                  <div class="tab-left" @click="handleEditPassword">
                    修改密码
                  </div>
                </div>
                <!-- tab -->
                <div class="mt10" style="text-align: left">
                  <div
                    :class="{ isActive: isActive == item.url }"
                    v-for="(item, index) in userMenuCenter"
                    :key="item.id"
                    class="items curr"
                    @click="goToSubject(item, index)"
                  >
                    <span style="margin-right: 10px" :class="item.icon"></span>
                    {{ item.title }}
                  </div>
                </div>
                <!-- 退出 -->
                <div class="login-out df curpoin">
                  <span
                    class="iconfont icon-tuichu"
                    style="margin-right: 10px; font-size: 14px"
                  ></span>
                  <div @click="handleLoginOut">退出</div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>

        <dropDown
          v-show="isDrop"
          @senIsdrop="senIsdrop"
          :toLocation="toLocation"
        />
        <span v-if="isGkbData.isGKB == 1" style="color: red; font-size: 10px"
          >({{ isGkbData.isGKB == 1 ? '高考版' : '' }})</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { classTypeListApi } from '@/api/zy/index';
import dropDown from '@/components/DropDown';
import { getProvince } from '@/api/provinces/province';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { removeToken } from '@/utils/auth';
import { getGkbInfo } from '@/api/user';
import { get } from 'lodash';
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();

const store = useStore();
const router = useRouter();
const province = ref('');
const isDrop = ref(false);
const classParams = ref({
  page: 1,
  pageSize: 100,
});
const toLocation = ref({
  toleft: '150px',
  totop: '35px',
});

const isGkbData = ref({
  isGKB: null,
});
const isActive = ref(route.path);

const handleGetIsGKB = () => {
  if (store.getters.user.userInfo.pid || store.getters.user.provinceData.id) {
    getGkbInfo({
      pid:
        store.getters.user.userInfo.pid || store.getters.user.provinceData.id,
    }).then((res) => {
      if (res.data.code == 20000) {
        isGkbData.value = res.data.data;
        store.dispatch('user/changeIsGkb', res.data.data);
      }
    });
  }
};
handleGetIsGKB();

const userMenuCenter = ref([
  {
    id: 1,
    title: '应用广场',
    url: '/applicationSquare',
    icon: 'iconfont icon-yingyongguangchang',
  },
  {
    id: 2,
    title: '志愿表',
    url: '/volunteerList',
    icon: 'iconfont icon-wodezhiyuanbiao',
  },
  {
    id: 3,
    title: '选科方案',
    url: '/mysubject',
    icon: 'iconfont icon-xuankefangan',
  },
  { id: 4, title: '测评报告', url: '/ping', icon: 'iconfont icon-ziyuan14' },
]);
const provinceList = ref([]);
const navList = ref([
  { id: 1, title: '首页', url: '/home' },
  {
    id: 2,
    title: '智能选科',
    children: [
      { id: 2 - 1, title: '完整智能模式', url: '/optional' },
      { id: 2 - 2, title: '自主选科分析', url: '/optional' },
      { id: 2 - 3, title: '选考科目查询', url: '/optional' },
    ],
  },
  { id: 3, title: '高考资讯', url: '/news' },
  {
    id: 4,
    title: '数据查询',
    children: [
      { id: 4 - 1, title: '找大学', url: '/college/searchCollege' },
      { id: 4 - 2, title: '查专业', url: '/majorLibrary' },
      { id: 4 - 3, title: '分数线', url: '/scoreLine' },
      { id: 4 - 4, title: '位次查询', url: '/positionalQuery' },
      { id: 4 - 5, title: '提前批', url: '/tiQianPi' },
      { id: 4 - 6, title: '看职业', url: '/jorLibrary' },
      { id: 4 - 7, title: '批次线', url: '/picixian' },
    ],
  },
  {
    id: 5,
    title: '填志愿',
    children: [
      { id: 5 - 1, title: '专家一对一填报', url: '/expert-one-on-one' },
      { id: 5 - 2, title: '一键填报', url: '/batchInfo' },
      { id: 5 - 3, title: '院校优先填报', url: '/batchInfo' },
      { id: 5 - 4, title: '专业优先填报', url: '/batchInfo' },
      { id: 5 - 5, title: '职业优先填报', url: '/batchInfo' },
    ],
  },
  // 志愿讲堂
  {
    id: 7,
    title: '升学课堂',
    children: [{ id: 7 - 5, title: '视频课', url: '/ziYclassrooms' }],
  },
  { id: 6, title: '学生测评', url: '/appraisal' },
  { id: 6, title: '服务', url: '/shopserve' },
  { id: 6, title: '咨询师', url: '/experts' },
]);
const isActiveBox = ref('');
const handleUserInfo = () => {
  router.push({ path: '/accounts' });
};
const handleEditPassword = () => {
  router.push({
    path: '/accounts',
    query: {
      type: 1,
    },
  });
};
//升级VIP
const onClickOpenVIP = () => {
  router.push({
    path: '/shopserve',
  });
};
// 课程类别
const classTypeList = async () => {
  const { data } = await classTypeListApi(classParams.value);

  const filterList = navList.value.find((item) => item.id == 7);
  // 将  data.data.data 添加到 children 中
  data.data.data.forEach((item) => {
    filterList.children.push({
      id: item.id, // 使用 pushData 的 id
      title: item.name, // 使用 pushData 的 name 作为标题
      url: `/ziYclassrooms?id=${item.id}`, // 假设需要一个动态 URL
    });
  });
};
const handleLoginOut = () => {
  localStorage.removeItem('vuex');
  removeToken();
  location.reload();
  router.push('/home');
};
const goToSubject = (item) => {
  isActive.value = item.url;
  router.push(item.url);
};
const senIsdrop = (val) => {
  isDrop.value = val;
};
const handleCutUrl = (item) => {
  if (!item.url) return false;
  router.push({
    path: item.url,
  });
};
const handleGotoUserCen = () => {
  router.push({
    path: '/applicationSquare',
  });
};
const handleMouseOver = (item, index) => {
  isActiveBox.value = item.children ? index : -1;
  if (item.children) {
    const icon = document
      .getElementsByClassName('item')
      [index].querySelector('.icon');
    if (icon) {
      icon.style.transform = 'rotate(180deg)';
    }
  }
};
const handleMouseOut = (item, index) => {
  isActiveBox.value = -1;
  if (item.children) {
    const icon = document
      .getElementsByClassName('item')
      [index].querySelector('.icon');
    if (icon) {
      icon.style.transform = 'rotate(0deg)';
    }
  }
};

// 切换省份
const fetchProvince = () => {
  getProvince().then((res) => {
    if (res.data.code == 20000) {
      provinceList.value = res.data.data;
    }
  });
};
const handleGoUrl = (item) => {
  router.push({
    path: item.url,
  });
};
onMounted(() => {
  classTypeList();
  fetchProvince();
  if (!province.value) {
    let locapProvince = localStorage.getItem('province');
    province.value = locapProvince;
  }
});
</script>

<style lang="scss" scoped>
.provinceList {
  cursor: pointer;
  background: #fff;
  display: flex;
  // display: none;
  width: 385px;
  position: absolute;
  top: 30px;
  left: 35px;
  z-index: 999;
  flex-wrap: wrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  .list-item {
    width: 90px;
    text-align: center;
    padding: 0px 10px;
    height: 35px;
    line-height: 35px;
    margin: 10px 0;
    &:hover {
      background-color: var(--background-color);
      color: #fff;
    }
  }
}
.icon {
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}
#smallnav {
  // z-index: 2001;
  // position: sticky;
  // top: 0;
  // left: 0;
  width: 100%;
  background: #f0f0f0;

  .main {
    display: flex;
    align-items: center;
    height: 50px;
    .region {
      width: 140px;
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 36px;
      &:hover {
        color: var(--active-text);
      }
    }
    .my-box {
      position: relative;
      flex: 1;
      text-align: right;
      justify-content: flex-end;
    }
  }
  .navList {
    z-index: 999;
    display: flex;
    cursor: pointer;
    .item {
      // margin: 0 10px;
      padding: 15px 10px;
      &:hover {
        color: var(--active-text);
        background: #fff;
      }
    }
  }
  .children-box {
    z-index: 999;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: all 0.2s ease-in-out;
    position: absolute;
    top: 55px;
    left: 0;
    background: #333;
    border-radius: 10px;
    .children-item {
      z-index: inherit;
      color: #fff;
      padding: 10px 10px;
    }
  }
  .children-box1 {
    width: 120px;
  }
  .children-box4 {
    width: 140px;
  }
  .children-box6 {
    width: 230px;
  }
}
.active {
  color: red;
}
.actveBox {
  transform: scaleY(1) !important;
  opacity: 1 !important;
}
</style>
